<template>
	<div class="market_act_sign" v-if="datas.length>0">
		<div class="content">
			<div class="top">
				<img :src="infos[0].face_path" alt="" />
				<div class="top_right">
					<h4>
						<p>{{ infos[0].sitename }}</p>						
						<button v-if="datas[0].is_join===0&&dateObj.s !== ''" @click="joins">立即报名</button>
						<button v-if="datas[0].is_join===1&&dateObj.s !== ''" style="background:#909399;cursor:default;">已报名</button>
						<button v-if="datas[0].is_join===2&&dateObj.s !== ''" @click="joins">已报名,未支付</button>
						<button v-if="dateObj.s === ''&&isEnd" style="background:#909399;cursor:default;">报名时间已结束</button>
					</h4>
					<p v-if="datas[0].price>0">价格：￥{{ datas[0].price }}</p>
					<p v-else>价格：￥0<span>限时免费</span></p>					
					<p v-if="dateObj.s !== ''">报名时间剩余：{{ dateObj.d }}天{{ dateObj.h }}时{{ dateObj.m }}分{{ dateObj.s }}秒</p>
					<p v-if="dateObj.s === ''">报名已结束</p>
				</div>
			</div>
			<div class="info">
				<div class="info1">
					<h6>参与宝店：<p>{{ datas[0].title }}</p></h6>
				</div>
				<div class="info1">
					<h6>活动名称：<p>{{ datas[0].title }}</p></h6>
				</div>
				<div class="info1">
					<h6>推广类型：<p>{{ datas[0].join_type }}</p></h6>
				</div>
				<div class="info1">
					<h6>当前报名：<p>{{ datas[0].join_count }}&nbsp;/&nbsp;{{ datas[0].maxJoinCount }}</p></h6>
				</div>
				<div class="info1">
					<h6>开始时间：<p>{{ datas[0].startTime*1000 | filterTimess }}</p></h6>
				</div>
				<div class="info1">
					<h6>结束时间：<p>{{ datas[0].endTime*1000 | filterTimess }}</p></h6>
				</div>
			</div>
			<div class="act_rule">
				<h6>活动规则：<span v-html="datas[0].ruleContent"></span></h6>
			</div>
			<div class="select_goods" :class="{sel:!show1}" v-if="promoteIndex===3">
				<h3 @click.stop="show1=!show1">请选择要推广的商品</h3>
				<transition name="fade">
					<div class="goods_border" v-if="show1">
						<div class="no_select_img" v-if="selGoodsData.length===0" @click="showSec">
							<img src="../../assets/images/marketAct/plusImg.png" alt="" />
							<span>添加商品</span>
							<p>请选择一件推广活动的商品</p>
						</div>
						<div class="have_select_img" v-if="selGoodsData.length>0&&datas[0].is_join===0" @click="showSec">
							<img :src="selGoodsData[0].face_path" alt="" />
							<div class="sec_goods_infos">
								<p>{{ selGoodsData[0].title }}</p>
								<div>
									<p>价格：</p>
									<p>{{ selGoodsData[0].price | twoDecimal }}元</p>
								</div>
							</div>
						</div>
						<div class="have_select_img" v-if="selGoodsData.length>0&&datas[0].is_join===1">
							<img :src="selGoodsData[0].face_path" alt="" />
							<div class="sec_goods_infos">
								<p></p>
								<div>
									<p></p>
									<p></p>
								</div>
							</div>
						</div>
						<div class="have_select_img" v-if="selGoodsData.length>0&&datas[0].is_join===2">
							<img :src="selGoodsData[0].face_path" alt="" />
							<div class="sec_goods_infos">
								<p></p>
								<div>
									<p></p>
									<p></p>
								</div>
							</div>
						</div>
					</div>
				</transition>
			</div>
			<div class="imgs">
				<img :src="datas[0].previewPath" alt="" />
			</div>			
		</div>

		<!-- 选择秒杀商品 -->		
		<div class="select_sec_goods" v-if="showPop">						
			<popup v-model="showPop" width="100%" position="right">								
				<div class="nav_lists">
					<div class="nav_list" v-for="item in navData" :key="item.id" :class="{sel1: navIndex === item.id}" @click="selNav(item)">{{ item.cat_name }}</div>					
				</div>
				<scroller noDataText="暂无更多数据" :on-infinite="infinites" ref='myScroller' class='myScroller'>
				<div class="lists">
					<div class="list" v-for="(item,index) in gData" :key="index" @click="selSec(item)">
						<img :src="item.face_path" alt="" />
						<p>{{ item.title }}</p>
						<p>￥{{ item.price | twoDecimal }}</p>
						<img v-if="selGoodsData.length>0&&selGoodsData[0].id===item.id" class="sel_sec" src="../../assets/images/marketAct/selected.png" alt="" />
					</div>							
				</div>
				<div class="no_goods" v-if="noGoods">暂无数据</div>
				</scroller>				
			</popup>			
			<div class="sec_btns">
				<p @click="ensure">确认</p>
				<p @click="cancel">取消</p>
			</div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { getUrlParam } from '@/assets/js/getUrlParam'
	import { XHeader, Tab, TabItem, Popup } from 'vux';
	export default {
		name: 'market_act_sign',
		data() {
			return {
				promoteIndex: -1,
				params: [],
				infos: [],
				datas: [],
				dateObj: {
					d: '',
					h: '',
					m: '',
					s: ''
				},	
				isEnd: false,			
				selGoodsData: [], //选中的商品数据信息
				show1: true,
				showPop: false,
				navData: [],
				navIndex: 0,
				gData: [],	
				page3: 1,	
				pageSize3: 6,
				noGoods: false,
				payParams: 0,
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
			Popup
		},
		computed: {

		},
		created() {
			if(localStorage.getItem('promoteInfo')) {
				this.infos.push(JSON.parse(localStorage.getItem('promoteInfo')));
			}
			this.promoteIndex = +this.$route.query.promoteIndex;
		},
		mounted() {
			this.getDetail();
		},
		methods: {
			getDetail() {
				this.$vux.loading.show();
				let obj = {};
				obj.token = getUrlParam('token') || '';
				obj.uid = getUrlParam('uid') || '';
				obj.id = +this.$route.query.id;
				obj.shop_id = this.infos[0].shop_id;
				this.$axiosGet('/platform/service/promotionDetaill.json', obj, true).then(res => {
					if(res.code === 200) {
						this.$vux.loading.hide();
						this.datas = res.data;
						this.selGoodsData = [];
						if (this.datas[0].goods_face_path) {
							this.selGoodsData.push({face_path:this.datas[0].goods_face_path});
						}
						setInterval(() => {
							this.getRTime();
						}, 500);
					}
				})
			},
			//立即报名
			joins() {																
				let obj = {};
				let self = this;				
				obj.token = getUrlParam('token') || '';
				obj.uid = getUrlParam('uid') || '';
				obj.joinType = this.promoteIndex;
				obj.store_promotion_activitie_id = this.datas[0].id;
				// 当joinType为1时 此itemId为 应用号id 当joinType为2时 itemId为 团购券id当joinType为3时 itemId为 商品id
				if(this.promoteIndex === 1){
					obj.itemId = this.infos[0].shop_id;
				}else if(this.promoteIndex === 2){
					
				}else if(this.promoteIndex === 3){					
					if(this.selGoodsData.length === 0){						
						this.$vux.alert.show({
							title: '提示',
							content: '请选择推广商品'
						})
						return;
					}					
					obj.itemId = this.selGoodsData[0].id;
					obj.title = this.selGoodsData[0].title;
				}	
				obj.shop_id = this.infos[0].shop_id;
				obj.store_promotion_activitie_title = this.datas[0].title;				
				console.log(obj);return;	
				if (this.datas[0].is_join !== 1) {
					obj.prom_id = this.datas[0].prom_id;
					obj.pay_status = 1 //给后台一个标识，代表未支付
				} 				
				this.$axiosGet('/platform/service/joinActivities.json',obj,true).then(res => {
					if(res.code === 200){						
						this.payParams = res.id;												
						//this.dialog3 = true;
						setTimeout(() => {
							this.$vux.confirm.show({
								title: '是否支付成功',
								content: '提示',						
								onCancel () {
									self.$payOrder('Wechat',this.payParams,'platform.promotionactivity').then(res2 => {
										self.showCheck = setInterval(() => {
											self.checkStatus(res2.id);
										}, 3000);
									})
								},
								onConfirm () {
									self.$payOrder('Wechat',this.payParams,'platform.promotionactivity').then(res2 => {
										self.showCheck = setInterval(() => {
											self.checkStatus(res2.id);
										}, 3000);
									})
								}
							})
						}, 2000);
					}
				})
			},
			//轮询活动付款状态
			checkStatus(ids) {				
				let obj = {};
				let self = this;				
				obj.uid = getUrlParam('uid') || '';
				obj.token = getUrlParam('token') || '';	
				obj.id = ids;			
				this.$axiosGet('/payment/pays/checkpaystatus.json', obj, true).then( res => {										
					//data.code  支付状态0未支付,1支付成功，-1已退款，-2已取消	
					if (res.code === 200) {
						if (res.data.code === 1) { //完成支付							
							clearInterval(this.showCheck);
							this.$router.push('/marketList');										
						} else if (res.data.code === 1) {
							this.isFinishedPay = false;							
						}
					}
				});
			},	
			showSec() {
				this.showPop = true;
				this.getNav();
			},	
			selSec(arr) {
				this.selGoodsData = [];
				this.selGoodsData.push(arr);				
				this.showPop = false;
			},	
			ensure() {
				this.showPop = false;
			},
			cancel() {				
				this.showPop = false;
			},
			selNav(obj) {
				this.navIndex = obj.id;
				this.page3 = 1;
				this.gData = [];
				this.infinites();
			},
			infinites() {  
				if (this.navIndex === 0) {
					this.getNav();
				} else {
					this.getG();                              
				}                
			},
			getNav() {
				let obj = {};
				obj.token = getUrlParam('token') || '';
				obj.uid = getUrlParam('uid') || '';
				obj.shop_id = getUrlParam('user_product_id') || '';
				obj.flag_id = 1;
				this.$axiosGet('/social-ads/adCampaign/getAppCate.json', obj, true).then(res => {
					if (res.code === 200) {
						this.navData = res.data;
						this.navIndex = res.data[0].id;											
						this.getG(); 
					}					
				});
			},
			getG() {										  	
				this.noGoods = false;	
				let obj = {};
				obj.token = getUrlParam('token') || '';
				obj.uid = getUrlParam('uid') || '';
				obj.shop_id = getUrlParam('user_product_id') || '';
				obj.flag_id = 1;
				obj.cat_id = this.navIndex;
				obj.page = this.page3;
				obj.limit = this.pageSize3;
				this.$axiosGet('/social-ads/adCampaign/getProm.json', obj, true).then(res => {
					if (res.code === 200) {						
						if (res.data.length === 0) {  
							this.noGoods = true;							                         
							this.$refs.myScroller.finishInfinite(2); 							                          
                            return;														
						}						
						this.gData = this.gData.concat(res.data); 						
						let arr = [];
						for(let val of this.gData){
							arr.push(val.id)
						}
						let newArr = [];
						let newArr2 = [];
						for(let i =0;i<arr.length;i++){
							if(newArr.indexOf(arr[i]) == -1){
								newArr.push(arr[i]);
								newArr2.push(this.gData[i]);
							}
						}
						this.gData = newArr2;						 						
						if(res.data.length < this.pageSize3 || JSON.stringify(res.data) === '{}') {													
							this.$refs.myScroller.finishInfinite(2);
							return;
							if(res.data.length === 0 || JSON.stringify(res.data) === '{}') {								
								return;
                            }                            
						} else {
							this.page3++;
							this.$refs.myScroller.finishInfinite();
                        }  
					} else if (res.code === 404) {
						this.noGoods = true; 
						this.gData = [];
						this.$refs.myScroller.finishInfinite(2);											
						return;						
					}					
				});
			},
			//倒计时
			getRTime() {
				let str = this.format(this.datas[0].endTime * 1000);
				str = str.replace(/-/g, '/');
				let time1 = new Date().getTime();
				let time2 = new Date(str).getTime();
				let time3 = time2 - time1;
				if(time3 <= 0) {
					this.dateObj.s = '';
					this.isEnd = true;
				} else {
					this.isEnd = false;
					this.$set(this.dateObj, 'd', this.checkTime(Math.floor(time3 / 1000 / 60 / 60 / 24)));
					this.$set(this.dateObj, 'h', this.checkTime(Math.floor(time3 / 1000 / 60 / 60 % 24)));
					this.$set(this.dateObj, 'm', this.checkTime(Math.floor(time3 / 1000 / 60 % 60)));
					this.$set(this.dateObj, 's', this.checkTime(Math.floor(time3 / 1000 % 60)));
				}
			},
			checkTime(i) {
				if(i < 10) {
					i = "0" + i;
				}
				return '' + i;
			},
			format(val) {
				let y = new Date(val).getFullYear();
				let m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
				let d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
				return y + "-" + m + "-" + d;
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	._v-container{
		background: #fff;
	}
	.market_act_sign {
		min-height: 100%;
		background: #fff;
		text-align: left;
		.content {
			.top {
				width: 6.58rem;
				margin: 0 auto;
				padding: .33rem 0;
				border-bottom: 1px solid #c9c9c9;
				display: flex;
				position: relative;
				>img {
					width: 1.35rem;
					height: 1.35rem;
				}
				.top_right {
					margin-left: .26rem;
					h4 {
						width: 4.85rem;
						height: .58rem;
						display: flex;
						align-items: center;
						justify-content: space-between;
						p {
							font-size: .4rem;
							color: #000;
							font-weight: 400;
						}
						button {							
							padding: .15rem .4rem;							
							text-align: center;
							background: #fff;
							border: 1px solid #449fe6;
							border-radius: .06rem;
							font-size: .27rem;
							color: #449fe6;
						}
					}
					p:nth-of-type(1) {
						font-size: .26rem;
						color: #000;
						display: flex;
						align-items: center;
						margin: .34rem 0;
						span {
							background: #ff0800;
							padding: .05rem .16rem;
							color: #fff;
							margin-left: .23rem;
						}
					}
					p:nth-of-type(2) {
						font-size: .26rem;
						color: #000;
					}
				}
			}
			.info {
				width: 6.58rem;
				margin: 0 auto;
				padding: .14rem 0 .26rem 0;
				border-bottom: 1px solid #c9c9c9;
				.info1 {
					h6 {
						font-size: .28rem;
						color: #717171;
						font-weight: 400;
						display: flex;
						align-items: center;
						margin-top: .12rem;
						p {
							color: #020202;
						}
					}
				}
			}
			.act_rule {
				width: 6.58rem;
				margin: .35rem auto;
				h6 {
					font-size: .27rem;
					color: #0d0d0d;
					font-weight: 400;
				}
			}
			.imgs {
				width: 6.44rem;
				margin: 0 auto;
			}
			.select_goods {
				border-bottom: .16rem solid #f2f2f2;
				padding: .28rem .43rem .21rem .43rem;
				>h3 {
					font-size: .31rem;
					color: #000;
					font-weight: 400;
					text-align: left;
				}
				.goods_border {
					height: 1.84rem;
					border: 1px dashed #000;
					border-radius: .06rem;
					margin-top: .23rem;
					.no_select_img {
						display: flex;
						flex-direction: column;
						align-items: center;
						padding-top: .2rem;
						img {
							width: .52rem;
							height: .52rem;
						}
						span {
							font-size: .26rem;
							color: #4b92d4;
							margin: .12rem 0;
						}
						p {
							font-size: .26rem;
							color: #3b3b3b;
						}
					}
					.have_select_img {
						display: flex;
						justify-content: space-between;
						padding: 0 .25rem 0 .12rem;
						margin-top: .08rem;
						img {
							height: 1.62rem;
						}
						.sec_goods_infos {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							>p {
								font-size: .22rem;
								color: #111;
							}
							>div {
								p {
									font-size: .22rem;
									color: #111;
									text-align: right;
								}
							}
						}
					}
				}
			}
		}
		.select_sec_goods {
			text-align: left;									
			.nav_lists{
				position: fixed;
				left: 0;
				top: -.05rem;								
				display: flex;
				background: #fff;
				z-index: 99;
				white-space: nowrap;
				overflow-x: auto;
				width: 100%;
				padding: .1rem;
				-webkit-overflow-scrolling: touch;
				&::-webkit-scrollbar {						
					width: 100px;
					height: 2px;
				}
				&::-webkit-scrollbar-thumb {
					background: #808080;
				}
				.nav_list{					
					padding: .1rem;					
					position: relative;	
					margin-right: .1rem;				
				}
				.sel1{
					color: #f00;
					&:after{
						content: '';
						position: absolute;
						left: 0;
						bottom: 0;
						width: 100%;
						height: 1px;
						background: #f00;
						transform-origin: 0 0;
						transform: scaleY(.5);
					} 
				}
			}
			.lists {
				display: flex;
				flex-wrap: wrap;				
				padding: .8rem 0 1.4rem 0;				
				background: #fff;
				.list {					
					width: 50%;					
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					position: relative;										
					margin: .34rem 0 0 0;
					img {
						width: 3.2rem;
					}
					p:nth-of-type(1) {
						font-size: .26rem;
						color: #170f1c;
						margin-top: .1rem;
						width: 90%;
						height: .65rem;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					p:nth-of-type(2) {
						width: 90%;
						font-size: .26rem;
						color: #c70617;						
						font-weight: 600;
						text-align: left;						
					}
					.sel_sec {
						width: .3rem;
						height: .3rem;
						position: absolute;
						right: .3rem;
						top: .3rem;
					}
				}				
			}
			.no_goods{
				position: fixed;
				left: 50%;				
				transform: translate(-50%, -50%);
				font-size: .34rem;
				color: #808080;
			}
		}
		.sec_btns {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 7.5rem;
			height: .88rem;
			background: #fff;
			z-index: 999;
			display: flex;
			align-items: center;						
			border-top: 1px solid #f0f0f0;
			p {
				width: 50%;
				height: .48rem;
				font-size: .32rem;
				text-align: center;
			}
			p:nth-of-type(1) {
				color: #429dd2;
			}
			p:nth-of-type(2) {
				color: #8a8a8a;
				border-left: 1px solid #8a8a8a;
			}
		}
	}
</style>